.loading-9 {
  width: 50rpx;
  height: 50rpx;
  background: transparent;
  border: 0 solid var(--color);
  border-width: 4rpx;
  border-radius: 0;
  animation: square-loader 2s infinite ease;
  transform: scale(0.9, 0.9);
  position: relative;

  &:after {
    display: inline-block;
    width: 100%;
    vertical-align: top;
    content: '';
    background-color: var(--color);
    animation: square-loader-inner 2s infinite ease-in;
  }
}

@keyframes square-loader {
  0% {
    transform: rotate(0deg);
  }
  25% {
    transform: rotate(180deg);
  }
  50% {
    transform: rotate(180deg);
  }
  75% {
    transform: rotate(360deg);
  }
  100% {
    transform: rotate(360deg);
  }
}

@keyframes square-loader-inner {
  0% {
    height: 0;
  }
  25% {
    height: 0;
  }
  50% {
    height: 100%;
  }
  75% {
    height: 100%;
  }
  100% {
    height: 0;
  }
}
